import { Flex, Avatar, Dropdown } from "antd"
import { Link } from "react-router-dom";
import { useTranslation } from 'react-i18next';
import { UserOutlined } from '@ant-design/icons';

import NightIcon from '@/assets/night.svg?react'
import LightIcon from '@/assets/light.svg?react'
import GithubIcon from '@/assets/github.svg?react'
import LangIcon from '@/assets/lang.svg?react'

import { useThemeStore, useUserStore } from "@/store";

import './index.less'


const FunctionCollection = () => {
    const { mode, switchMode } = useThemeStore()
    const { user } = useUserStore()
    const [t, i18n] = useTranslation()

    const isDarkMode = mode === 'dark'
    const fillColor = isDarkMode ? '#fff' : '#000'
    const items = [
        {
            key: '1',
            label: (
                <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                    1st menu item
                </a>
            ),
        },
        {
            key: '2',
            label: (
                <Link to="/login">{user ? 'log out' : 'log in'}</Link>
            )
        },
    ];

    const handleSwitchLang = () => {
        const lang = i18n.language === "zh-CN" ? "en-US" : "zh-CN";
        localStorage.setItem('lang', lang)
        i18n.changeLanguage(lang)
    }

    return <Flex justify='center' align='center' gap="middle" style={{ marginRight: '20px' }}>
        {isDarkMode ? <NightIcon className="mysvg" onClick={() => switchMode()} fill="#fff" /> : <LightIcon className="mysvg" onClick={() => switchMode()} />}
        <LangIcon fill={fillColor} className="mysvg" onClick={handleSwitchLang} />
        <GithubIcon fill={fillColor} className="mysvg" />
        <Dropdown menu={{
            items,
        }}>
            <Avatar icon={<UserOutlined />} />
        </Dropdown>
    </Flex>
}

export default FunctionCollection